<template>
  <div>
     <el-button @click="introduction('introduction')">顺序映射</el-button>
     <el-button @click="namesake('namesake')">同名映射</el-button>
     <el-button @click="deleteRepeat">删除重复</el-button>
     <!-- 表格映射关系 -->
    <div id="wrapper">
       <table border="1px" style="float: left; margin-right: 100px;">
        <thead>
           <tr>
           <th>ID</th>
             <th>名称</th>
           </tr>
        </thead>
           <tr v-for="(item,index) in getDatas(temp1)" :key="item.enName" :id="'left' + getOptions(item.enName, index) ">
                <th>{{ item.type }}</th>
                <th>{{ item.enName }}</th>
           </tr>
       </table>
       <el-button @click="initConnect">连接锚点</el-button>
       <table border="1px" style="float: left;">
        <thead>
           <tr>
           <th>ID</th>
             <th>名称</th>
           </tr>
        </thead>
           <tr v-for="(item,index) in temp2" :key="item.columnName" :id="'right' + getOptions1(item.columnName, index)">
                <th>{{ item.dataType }}</th>
                <th>{{ item.columnName }}</th>
           </tr>
       </table>
   </div>





  </div>
</template>
<script>
import {jsPlumb} from 'jsplumb'
let  jsPlumb_instance = null
export default {
 data() {
   return {
    table1: [
         { id: 1, name: '张三', age: 12 },
         { id: 2, name: 'weqeqeqwe', age: 12 },
         { id: 3, name: 'weqeqeqwe', age: 12 },
         { id: 4, name: 'weqeqeqwe', age: 12 },
         { id: 5, name: 'weqeqeqwe', age: 12 },
         { id: 6, name: 'weqeqeqwe', age: 12 },
       ],
       table2: [
         { id: 1, name: '张四', age: 12 },
         { id: 2, name: 'sfsdfsdfsdfsdf', age: 12 },
         { id: 6, name: 'sfsdfsdfsdfsdf', age: 12 },
       ],
       tempArr:[],
        temp2:[
      {
          "columnName": "id",
          "dataType": "INT",
          "columnComment": "",
          "columnLength": 10,
          "columnType": "long",
          "columnDataType": 4,
          "autoincrement": "NO",
          "decimalDigits": 0
      },
      {
          "columnName": "xm",
          "dataType": "xxxxxxx",
          "columnComment": "地区",
          "columnLength": 255,
          "columnType": "string",
          "columnDataType": 12,
          "autoincrement": "NO",
          "decimalDigits": 0
      },
      {
          "columnName": "dy",
          "dataType": "VARCHAR",
          "columnComment": "地区",
          "columnLength": 255,
          "columnType": "string",
          "columnDataType": 12,
          "autoincrement": "NO",
          "decimalDigits": 0
      },
      {
          "columnName": "value1",
          "dataType": "VARCHAR",
          "columnComment": "0-14岁",
          "columnLength": 255,
          "columnType": "string",
          "columnDataType": 12,
          "autoincrement": "NO",
          "decimalDigits": 0
      },
      {
          "columnName": "value2",
          "dataType": "VARCHAR",
          "columnComment": "15-59岁",
          "columnLength": 255,
          "columnType": "string",
          "columnDataType": 12,
          "autoincrement": "NO",
          "decimalDigits": 0
      },
      {
          "columnName": "value3",
          "dataType": "VARCHAR",
          "columnComment": "60岁及以上",
          "columnLength": 255,
          "columnType": "string",
          "columnDataType": 12,
          "autoincrement": "NO",
          "decimalDigits": 0
      },
      {
          "columnName": "value4",
          "dataType": "VARCHAR",
          "columnComment": "其中:65岁及以上",
          "columnLength": 255,
          "columnType": "string",
          "columnDataType": 12,
          "autoincrement": "NO",
          "decimalDigits": 0
      }
        ],
        temp1:[
      {
          "name": "序号",
          "enName": "id",
          "type": "long",
          "length": 19
      },
      {
          "name": "培训机构或领取补贴单位名称",
          "enName": "pxjgmc",
          "type": "string",
          "length": 255
      },
      {
          "name": "培训班级名称或培训课程名称",
          "enName": "pxbjmc",
          "type": "string",
          "length": 255
      },
      {
          "name": "培训类型",
          "enName": "pxlx",
          "type": "string",
          "length": 255
      },
      {
          "name": "培训专业（工种）",
          "enName": "pxzy",
          "type": "string",
          "length": 255
      },
      {
          "name": "级别",
          "enName": "jb",
          "type": "string",
          "length": 32
      },
      {
          "name": "培训时间起",
          "enName": "pxsjq",
          "type": "string",
          "length": 32
      },
      {
          "name": "培训时间止",
          "enName": "pxsjz",
          "type": "string",
          "length": 32
      },
      {
          "name": "姓名",
          "enName": "xm",
          "type": "string",
          "length": 32
      },
      {
          "name": "性别",
          "enName": "xb",
          "type": "string",
          "length": 16
      },
      {
          "name": "证书类型",
          "enName": "zslx",
          "type": "string",
          "length": 32
      },
      {
          "name": "证书等级",
          "enName": "zsdj",
          "type": "string",
          "length": 32
      },
      {
          "name": "补贴类型",
          "enName": "btlx",
          "type": "string",
          "length": 64
      },
      {
          "name": "培训补贴金额（元）",
          "enName": "pxbtje",
          "type": "string",
          "length": 32
      },
      {
          "name": "鉴定补贴金额（元）",
          "enName": "jdbtje",
          "type": "string",
          "length": 32
      }
        ],
        activeName:'introduction',
        activeName1:'namesake'
   }
 },

 methods:{
    getDatas(data) {
        this.tempArr = data
        return data
    },
    getOptions(Name, index) {
        if(this.activeName == 'introduction'){
            return index
        }else {
            return Name
        }

    },
      getOptions1(Name, index) {
        if(this.activeName == 'introduction'){
            return index
        }else {
            return Name
        }

    },
    deleteRepeat() {
        // jsPlumb_instance.deleteEveryConnection();
        jsPlumb_instance.deleteEveryEndpoint();
    },
    async introduction(parameter) {
        this.activeName = parameter
        console.log(this.activeName, 'activeName');
        jsPlumb_instance.deleteEveryEndpoint();
      setTimeout(() => {
        const jsplumbConnectOptions ={
            isSource: true,
            isTarget: true,
            // 动态锚点、提供了4个方向 Continuous、AutoDefault
            anchor: "Continuous",
         }
        this.temp1.forEach((item,index) => {
            const indexParent = this.temp2.findIndex((it,indexs) =>indexs == index)
            console.log(indexParent, '224');
            if(indexParent != -1) {
             jsPlumb_instance.connect({
              source: 'left' + index,
              target: 'right' + indexParent,
            }, jsplumbConnectOptions)
            }


        })
      },2000)
    },
    // 同名映射
   async  namesake(parameter) {
        this.activeName = parameter
        jsPlumb_instance.deleteEveryEndpoint();
      setTimeout(() => {
        const jsplumbConnectOptions ={
            isSource: true,
            isTarget: true,
            // 动态锚点、提供了4个方向 Continuous、AutoDefault
            anchor: "Continuous",
         }
        this.temp1.forEach(item => {
            const content = this.temp2.find(it => it.columnName == item.enName)
            console.log(content);
            if(content) {
              jsPlumb_instance.connect({
              source: 'left' + item.enName,
              target: 'right' + content.columnName,
            }, jsplumbConnectOptions)
            }


        })
      },2000)
    },
     init() {
        // jsPlumb_instance.reset()
        // 整体样式
        jsPlumb_instance = jsPlumb.getInstance({
           Container: 'wrapper', // 选择器ID
           EndpointStyle: { radius: 4, stroke: "#409EFF" }, // 端点样式
           PaintStyle: { stroke: "#409EFF", strokeWidth: 2 }, // 绘画样式，默认8px线宽  #456
           HoverPaintStyle: { stroke: "#1E90FF" }, // 默认悬停样式  默认为null
           ConnectionOverlays: [
           // 此处可以设置所有箭头的样式，因为我们要改变连接线的样式，故单独配置
            // Arrow-箭头  Label-标签  PlainArrow-平头箭头  Diamond-菱形  Diamond(钻石)-钻石箭头  Custom-自定义
              [
                 "Label",
                 {
                 location: 1,
                 length: 8,
                 paintStyle: {
                    stroke: "#409EFF",
                    fill: "#409EFF",
                 },
                 },
              ],
           ],
           Connector: ["Straight"], // 连接器的类型：直线Straight，流程图flowchart，状态机state machine，贝塞尔曲线Bezier等 默认贝塞尔曲线
           DrapOptions: { cursor: "crosshair", zIndex: 2000 },
         })
        //  this.initConnect()
     },
     initConnect() {
      const jsplumbConnectOptions ={
            isSource: true,
            isTarget: true,
            // 动态锚点、提供了4个方向 Continuous、AutoDefault
            anchor: "Continuous",
         }
        this.temp1.forEach(item => {
            const content = this.temp2.find(it => it.columnName == item.enName)
            console.log(content);
            if(content) {
              jsPlumb_instance.connect({
              source: 'left' + item.enName,
              target: 'right' + content.columnName,
            }, jsplumbConnectOptions)
            }


        })
     }
 },
 mounted() {
  this.init()
 }
}
</script>
<style >

#wrapper{
   width: 500px;
   height: 100vh;
}
/* 表格的边框样式 */
table {
  border-collapse: collapse;
  /* 合并边框 */
  /* width: 100%; */

}

/* 表头单元格的样式 */
th {
  background-color: #f2f2f2;
  padding: 8px;
  text-align: left;
  border: 1px solid #ddd;
}

/* 数据行单元格的样式 */
td {
  padding: 8px;
  text-align: left;
  border: 1px solid #ddd;
}
</style>
